<template>
	<div class="bigContent">
		<div class="login-wrap" v-show="showLogin">
			<div class="logo"><span class="big_title">学委作业助手</span></div>
			<div class="form-item">
				<div class="pic">
					<img src="~@/assets/img/login/number2.png" class="picOne">
				</div>
				<input type="text" placeholder="邮箱" v-model="loginName">
			</div>
			<div class="form-item">
				<div class="pic">
					<img src="~@/assets/img/login/password.png" class="picOne">
				</div>
				<input type="password" placeholder="密码" v-model="password">
			</div>
			<div class="form-item"><button v-on:click="login">登 录</button></div>
			<div class="reg-bar">
				<a class="reg" v-on:click="ToRegister">立即注册</a>
				<!-- <a class="forget">忘记密码</a> -->
			</div>
		</div>
		<div class="register-wrap" v-show="showRegister">
			<div>
				<img src="~@/assets/img/login/back.png" class="backPic" v-on:click="BackLogin">
			</div>
			<div class="registHead">
				<img src="~@/assets/img/login/register_loge.png" class="picOne">
				<div class="reFont">注 &ensp; 册</div>
			</div>
			<div class="registerFrom">
				<span class="font">姓 &ensp; &ensp; 名：</span><input type="text" class="i-text" v-model="registerName">
			</div>
			<div class="registerFrom">
				<span class="font">学 &ensp; &ensp; 校：</span><input type="text" class="i-text" v-model="registerSchool">
			</div>
			<div class="registerFrom">
				<span class="font">账 &ensp; &ensp; 号：</span><input type="text" class="i-text" v-model="registerNo">
			</div>
			<div class="registerFrom">
				<span class="font">手 &ensp; &ensp; 机：</span><input type="text" class="i-text" v-model="registerPhone">
			</div>
			<div class="registerFrom">
				<span class="font">邮 &ensp; &ensp; 箱：</span><input type="text" class="i-text" v-model="registerMail">
			</div>
			<div class="registerFrom">
				<span class="font">密 &ensp; &ensp; 码：</span><input type="password" class="i-text" v-model="registerPassword">
			</div>
			<div class="registerFrom">
				<span class="font">确认密码：</span><input type="password" class="i-text" v-model="registerSurePassword">
			</div>
			<div class="selectSex">
				<span class="font">性 &ensp; &ensp; 别：&ensp;</span>
				<el-radio v-model="radio1" label="1">男</el-radio>
				&ensp;&ensp;
				<el-radio v-model="radio1" label="2">女</el-radio>
			</div>
			<button class="register-item" v-on:click="Register">注 册</button>
		</div>
	</div>
</template>
<script>
import http from '../../util/http';

export default{
	name: 'refresh',
	inject: ['reload'],
	data() {
		return {
			loginName: '',
			password: '',
			showLogin: true,
			showRegister: false,
			radio1: '',
			registerName: '',
			registerSchool: '',
			registerNo: '',
			registerPhone: '',
			registerMail: '',
			registerPassword: '',
			registerSurePassword: '',
		};
	},
	methods: {
		login() {
			localStorage.setItem('isCanEnter', '0');
			localStorage.clear();
			if (this.loginName === '' || this.password === '') {
				alert('请输入账号或密码');
			} else {
				http.post(`/loginAPI/loginMessage?mail=${this.loginName}&pwd=${this.password}`)
				.then((res) => {
					const resData = res.resultMap.loginMessage;
					window.localStorage.setItem('userRole', resData.id_flag);
					window.localStorage.setItem('userName', resData.name);
					window.localStorage.setItem('userId', resData.id);
					window.localStorage.setItem('userNo', resData.no);
					window.localStorage.setItem('userSex', resData.sex);
					window.localStorage.setItem('userClassId', resData.class_id);
					window.localStorage.setItem('userMail', resData.mail);
					window.localStorage.setItem('userTel', resData.tel);
					window.localStorage.setItem('userSchool', resData.school);
					if (window.localStorage.getItem('userRole') == 1) {//eslint-disable-line
						this.$router.push('/adaHome');
					} else if (window.localStorage.getItem('userRole') == 0) {//eslint-disable-line
						this.$router.push('/stuHome');
					}
				})
				.catch((error) => {
					this.$message.error(error);
					console.log(error);
				});
			}
		},
		Register() {
			if (this.registerName === '' || this.registerSchool === '' ||
					this.registerPhone === '' || this.registerMail === '' ||
					this.registerPassword === '' || this.radio1 === '' ||
					this.registerNo === '') {
						this.$message({
							message: '请填写完整的信息',
							type: 'warning',
						});
			} else if (this.registerPassword !== this.registerSurePassword) {
				this.$message({
							message: '密码和确认密码不一样哦~',
							type: 'warning',
						});
			} else {
				http.post(`/loginAPI/registerMessage?name=${this.registerName}&
						no=${this.registerNo}&sex=${this.radio1}&school=${this.registerSchool}
						&tel=${this.registerPhone}&mail=${this.registerMail}
						&pwd=${this.registerPassword}`)
					.then((res) => {
						this.$message({
							message: '注册成功',
							type: 'success',
						});
						this.refresh();
						console.log(res.resultMap.message);
					})
					.catch((error) => {
						this.$message.error(error.message);
						console.log(error);
					});
			}
		},
		ToRegister() {
			this.showRegister = true;
			this.showLogin = false;
		},
		BackLogin() {
			this.showLogin = true;
			this.showRegister = false;
		},
		refresh() {
      this.reload();
    },
	},
};
</script>
<style scoped>
	* { margin: 0; padding: 0; }
	.bigContent{
		height: 100%;
		background-image: url('~@/assets/img/login/login_background.png');
		/* background-image: url('~@/assets/img/login/background.png'); */
		/* background: #fff url('~@/assets/img/login/background.png') 50% 50% no-repeat;  */
		background-size: cover;
	}
	.login-wrap {
			position: absolute;
			width: 30%;
			height: 85%;
			margin: auto;
			left: 0;
			top: 0;
			bottom: 0;
			right: 0;
			border: .02rem solid #fff;
			border-radius: .5rem;
			overflow: hidden;
	}
	.register-wrap{
		position: absolute;
		width: 30%;
		height: 85%;
		margin: auto;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
		border: .02rem solid #fff;
		border-radius: .5rem;
		overflow: hidden;
	}
	.backPic{
		margin: .2rem;
		width: 1rem;
		height: 1rem;
	}
	.registHead{
		margin: 0 0 0 3.4rem;
	}
	.el-radio{
		color: #fff;
		margin: .22rem .4rem 0 0;
	}
	.register-item{
		margin: .6rem 0 0 -.5rem;
		width: 4rem;
		height: .8rem;
		border: 0;
		border-radius: .6rem;
		font-size: .5rem;
		color: #1f6f4a;
		outline: none;
		cursor: pointer;
		background-color: #fff;
	}
	.identi{
		text-align: center;
		width: 2.5rem;
		height: .7rem;
		/* padding-left: .4rem; */
		border: .02rem solid #fff;
		border-radius: .6rem;
		font-size: .4rem;
		color: #fff;
		background-color: transparent;
		outline: none;
	}
	.big_title{
		color: #fff;
		font-size: 1rem;
	}
	.logo {
			width: 6rem;
			height: .8rem;
			margin: 2rem auto;
	}
	.pic{
		margin: 0 0 -1.1rem .5rem;
	}
	.picOne{
		width: 1rem;
		height: 1rem;
	}
	.form-item {
		position: relative;
		width: 9rem;
		margin: 0 auto;
		padding-bottom: 1rem;
	}
	.form-item input {
		width: 7rem;
		height: 1.2rem;
		padding-left: 1.7rem;
		border: .02rem solid #fff;
		border-radius: .6rem;
		font-size: .5rem;
		color: #fff;
		background-color: transparent;
		outline: none;
	}
	.form-item button {
			width: 9rem;
			height: 1.2rem;
			border: 0;
			border-radius: .6rem;
			font-size: .5rem;
			color: #1f6f4a;
			outline: none;
			cursor: pointer;
			background-color: #fff;
	}
	.reg-bar {
		width: 5rem;
		margin: .5rem auto 0;
		font-size: .4rem;
		overflow: hidden;
	}
	.reg-bar a {
		color: #fff;
		text-decoration: none;
	}
	.reg-bar a:hover {
		text-decoration: underline;
	}

	.reg {

		margin: 0 0 0 1.6rem;
	}
	.reg-bar .forget {
		float: right;
	}
	::-webkit-input-placeholder {
			font-size: .4rem;
			line-height: 1.4;
			color: #fff;
	}
	:-moz-placeholder {
			font-size: .4rem;
			line-height: 1.4;
			color: #fff;
	}
	::-moz-placeholder {
			font-size: .4rem;
			line-height: 1.4;
			color: #fff;
	}
	:-ms-input-placeholder {
			font-size: .4rem;
			line-height: 1.4;
			color: #fff;
	}
	.registerFrom, .selectSex {
		margin: .6rem 0 0 1.5rem;
	}
	.reFont{
		color: #fff;
		font-size: .8rem;
		margin: -.9rem 0 1rem 1.5rem;
	}
	.font{
		color: #fff;
		font-size: .5rem;
    line-height: .8rem;
    float: left;
	}
	.i-text{
    width: 5rem;
		height: .7rem;
		padding-left: .7rem;
		border: .02rem solid #fff;
		border-radius: .6rem;
		font-size: .4rem;
		color: #fff;
		background-color: transparent;
		outline: none;
  }
	@media screen and (max-width: 500px) {
		* {
				box-sizing: border-box;
			}
		.login-wrap {
			position: static;
			width: auto;
			height: auto;
			margin: 0 30px;
			border: 0;
			border-radius: 0;
			}
		.logo {
			margin: 1rem auto;
		}
		.form-item {
			width: auto;
		}
		.form-item input, .form-item button, .reg-bar {
			width: 100%;
		}
	}
</style>
